<template>
  <div>
    <u-popup
      v-model="userInfoPopupShow"
      mode="left"
      width="592rpx"
      border-radius="36"
      @close="handleClose"
    >
      <view class="userInfoPopupWrapper">
        <view class="popupTop">
          <view class="popupAvatar">
            <img :src="userInfo.userPic" alt="" class="popupAvatarImg" />
            <img
              :src="careerVipImg"
              alt=""
              class="careerVipImg"
              v-if="subVipStatus == 10"
              @tap.stop="handleCareerVipImgClick"
            />
          </view>
          <view class="popupPersonInfo">
            <view class="popupPersonName">
              {{ userInfo.iname }}
            </view>
            <view class="popupPersonCareer"> </view>
          </view>
        </view>
        <view class="popupContent">
          <view
            class="popupContentItem"
            v-for="(item, index) in contentList"
            :key="item.flag"
            @click.stop="handleItemClick(item)"
          >
            <view>
              <image :src="item.icon" class="popupContentItemIcon" />
              <text class="popupContentItemName">{{ item.name }}</text>
            </view>
            <view>
              <view class="hasUpdateDot" v-show="item.isUpdate"></view>
              <image :src="arrowRight" class="arrowRight" />
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </div>
</template>

<script>
import { getMyUnreadMessageStatus } from "@/api/modules/vip";
export default {
  name: "userInfoPopup",
  props: {
    userInfoPopupShow: {
      type: Boolean,
      default: false,
    },
    userInfo: {
      type: Object,
      default: () => {},
    },
    listLockList: {
      type: Array,
      default: () => [],
    },
    listCollection: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    listLockList: {
      handler(newValue, oldValue) {
        newValue.find((item, index) => {
          if (item.isUpdate) {
            this.contentList.forEach((item) => {
              if (item.flag == "unlock") {
                item.isUpdate = true;
              }
            });
            return true;
          }
        });
      },
      immediate: true,
      deep: true,
    },
    listCollection: {
      handler(newValue, oldValue) {
        newValue.find((item, index) => {
          if (item.isUpdate) {
            this.contentList.forEach((item) => {
              if (item.flag == "collect") {
                item.isUpdate = true;
              }
            });
            return true;
          }
        });
      },
      immediate: true,
      deep: true,
    },
  },
  created() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.reQgetMyUnreadMessageStatus();
    const globalData = getApp().globalData;
    this.subStatus = globalData.subStatus;
    this.subVipStatus = globalData.subVipStatus;
    this.subId = globalData.subId;
  },
  data() {
    return {
      subStatus: "",
      subVipStatus: "",
      subId: "",
      careerVipImg: this.$imgBaseSelf + "career/careerVipImg.png",
      personId: "",
      hasUnreadMessage: false,
      isUnlockUpdate: false,
      isCollectUpdate: false,
      contentList: [
        // {
        //   icon: this.$imgBaseSelf + "common/positionCollectIcon.png?123",
        //   name: "我的关注",
        //   flag: "collect",
        // },
        // {
        //   icon: this.$imgBaseSelf + "common/positionUnlockIcon.png",
        //   name: "我的解锁",
        //   flag: "unlock",
        // },
        // {
        //   icon: this.$imgBaseSelf + "common/positionSubscribeIcon.png",
        //   name: "我的订阅",
        //   flag: "subscribe",
        // },
        {
          icon: "https://img3.job1001.com/ypMp/elan/images/careerPath/zty/myActivity.png",
          name: "我的活动",
          flag: "myActivity",
        },
        {
          icon: "https://img3.job1001.com/ypMp/elan/images/careerPath/zty/onlineService.png",
          name: "在线客服",
          flag: "onLineService",
        },
      ],
      collectList: [],
      unlockList: [],
      arrowRight: this.$imgBaseSelf + "common/arrowRight.png",
    };
  },
  methods: {
    handleCareerVipImgClick() {
      this.$emit("update:userInfoPopupShow", false);
      this.$nextTick(() => {
        this.$bus.$emit("setVippopUpVisible", true);
      });
    },
    reQgetMyUnreadMessageStatus() {
      const params = {
        personId: this.personId,
      };
      getMyUnreadMessageStatus(params).then((res) => {
        if (res.data) {
          this.contentList.forEach((item) => {
            if (item.flag == "subscribe") {
              item.isUpdate = res.data;
              console.log("item,item,item", item.isUpdate);
            }
          });
          this.$forceUpdate();
        }
      });
    },
    handleItemClick(item) {
      switch (item.flag) {
        case "myActivity":
          this.handleClose();
          this.$emit("onClickMyActivity");
          break;
        case "onLineService":
          this.handleClose();
          this.$emit("onClickOnLineService");
          break;
        default:
          break;
      }
    },
    handleClose() {
      this.$emit("update:userInfoPopupShow", false);
    },
  },
};
</script>

<style lang="scss" scoped>
.userInfoPopupWrapper {
  background-color: #f4f6f8;
  padding: 136rpx 32rpx 0;
  height: 100vh;
  width: 100%;
  .popupTop {
    display: flex;
    .popupAvatar {
      position: relative;
      margin-right: 38rpx;
      .popupAvatarImg {
        width: 136rpx;
        height: 136rpx;
        border-radius: 50%;
      }
      .careerVipImg {
        position: absolute;
        width: 116rpx;
        height: 38rpx;
        // bottom: -19rpxrpx;
        top: 102rpx;
        left: 10rpx;
      }
    }
    .popupPersonInfo {
      margin-top: 8rpx;
      .popupPersonName {
        height: 56rpx;
        font-size: 40rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #222222;
        line-height: 56rpx;
        margin-bottom: 26rpx;
      }
      .popupPersonCareer {
      }
    }
  }
  .popupContent {
    display: flex;
    flex-direction: column;
    border-radius: 16rpx;
    background: #ffffff;
    margin-top: 58rpx;
    padding: 0 34rpx;
    .popupContentItem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 110rpx;
      padding: 44rpx 0;
      border-bottom: 1px solid #f2efef;
      & > view {
        display: flex;
        align-items: center;
      }
      .popupContentItemIcon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }
      .popupContentItemName {
        margin-right: 28rpx;
        width: 120rpx;
        height: 52rpx;
        font-size: 30rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #222222;
        line-height: 52rpx;
      }
      .hasUpdateDot {
        width: 16rpx;
        height: 16rpx;
        background: #f75a3e;
        border-radius: 50%;
        margin-right: 26rpx;
      }
      .arrowRight {
        width: 13rpx;
        height: 25rpx;
      }
    }
  }
}
::v-deep .u-drawer__scroll-view {
}
</style>
